<template>
	<!-- 最外层的容器 -->
	<view class="my-settle-container">
	 <!-- 全选区域 -->
	  <label class="radio">
	    <radio color="#C00000" :checked="isFullCheck" @click="changeStatus" /><text>全选</text>
	  </label>
	
	  <!-- 合计区域 -->
	  <view class="amount-box">
	    合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
	  </view>
	  <view class="btn-settle" @click="settlement">结算({{ checkedCount }})</view>
	</view>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
	export default {
		name:"my-settle",
		data() {
			return {
				time: 3, // 定时器秒数
        timerId: null // 定时器的 Id
			}
		},
    
    methods: {
      ...mapMutations('m_cart', ['updateAllGoodsState']),
      ...mapMutations('m_user', ['updateRedirectInfo']),
      // 结算功能
      settlement () {
        // 判断是否存在收货地址
        if (!this.addressStr) return uni.$showMsg('请选择收货地址')
        
        // 首先判断是否勾选了商品
        if (!this.checkedCount) return uni.$showMsg('请选择需要购买的商品')
        
        // 判断用户是否登录
        // if (!this.token) return uni.$showMsg('请先登录')
        if (!this.token) return this.delayTime()
        
        // 实现微信支付功能
        this.payOrder()
      },
      
      // 实现微信支付
      async payOrder () {
        // 1. 创建订单
        // 1.1 准备参数
        const orderParams = {
          order_price: 0.01, // 总价
          consignee_addr: this.addressStr, // 收货地址
          goods: this.cart.filter(item => item.goods_state).map(item => (
            {
              goods_id: item.goods_id,
              goods_number: item.goods_count,
              goods_price: item.goods_price
            }
          ))
        }
        
        // 1.2 调用创建订单的接口
        const { data: createOrderRes } = await uni.$http.post('/my/orders/create', orderParams)
        
        // 1.3 根据返回的状态码进行判断
        if (createOrderRes.meta.status !== 200) return uni.$showMsg('创建订单失败！')
        
        // 1.4 获取到订单编号
        const orderNumber = createOrderRes.message.order_number
        
        // --------------------------------------------------------------------------------
              
        // 2. 订单预支付功能
        // 2.1 发起预支付请求
        const { data: advanceRes } = await uni.$http.post('/my/orders/req_unifiedorder', { order_number: orderNumber })
        // 2.2 根据状态码给用户提示
        if (advanceRes.meta.status !== 200) return uni.$showMsg('支付失败')
        // 2.3 获取到支付需要使用的参数
        const payParams = advanceRes.message.pay
        
        // --------------------------------------------------------------------------------
        
        // 3. 调用微信支付 API
        // 3.1 调用小程序 API 发起支付
        const [err, payResult] = await uni.requestPayment(payParams)
        
        // 3.2 对支付失败进行处理
        if (err) return uni.$showMsg('支付失败！')
        
        // 3.3 调用接口查询，是否真的支付成功
        const { data: confirmRes } = await uni.$http.post('/my/orders/chkOrder', { order_number: orderNumber })
              
        // 3.4 根据返回的状态码进行提示
        if (confirmRes.meta.status !== 200) return uni.$showMsg('支付失败！')
        
        // 3.5 支付成功以后的提示
        uni.showToast({
          icon: 'success',
          title: '支付成功！',
          duration: 2000
        })
     },  
      
      // 专门用来实现倒计时功能
      delayTime() {
        // 每次点击结算，都需要将倒计时秒数还原
        this.time = 3
        // 展示倒计时弹框
        this.showTips(this.time)
        
        // 使用 setInterval 实现倒计时
        this.timerId = setInterval(() => {
          this.time -= 1
          if (this.time <= 0) {
            clearInterval(this.timerId)
            
            uni.switchTab({
              url: '/pages/my/my',
              success: () => {
                this.updateRedirectInfo({
                  openType: 'switchTab',
                  from: '/pages/cart/cart'
                })
              }
            })
            
            return
          }
          this.showTips(this.time)
        }, 1000)
      },
      
      // 专门用来展示倒计时 UI
      showTips (n) {
        uni.showToast({
          icon: 'none',
          duration: 1500,
          mask: true,
          title: '请登录后再结算！' + n + ' 秒后自动跳转到登录页'
        })
      },
      
      // 全选和全不选
      changeStatus () {
        this.updateAllGoodsState(!this.isFullCheck)
      }
    },
    
    computed: {
      ...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']),
      ...mapGetters('m_user', ['addressStr']),
      ...mapState('m_user', ['token']),
      ...mapState('m_cart', ['cart']),
      // 是否全选
      isFullCheck () {
        // 只需要判断 已经勾选的购物车总数量 是否等于 购物车中所有的商品总数量
        return this.checkedCount === this.total
      }
    }
	}
</script>

<style lang="scss">
.my-settle-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}

</style>
